<template>
  <footer class="footer">
    <div class="footer-wrap container">
      <div class="footer-wrap__scheme">
        <router-link class="logo" to="/">
          <el-image :src="getSiteInfo.pc_logo_url || ''" fit="cover"></el-image>
        </router-link>
        <div class="tel" v-if="!$util.isEmpty(getSiteInfo.tel)">
          咨询电话：{{ getSiteInfo.tel }}
        </div>
        <div class="tel" v-if="!$util.isEmpty(getSiteInfo.time)">
          服务时间：{{ getSiteInfo.time }}
        </div>
        <el-button type="primary" size="mini" @click="goConsult"
          ><i class="edu-icon--left edu-icon-kefuzhongxin"></i>在线客服</el-button
        >
      </div>
      <div class="footer-wrap__serial" v-for="item in navList.slice(0, 4)" :key="item.id">
        <div class="title">{{ item.title }}</div>
        <div v-for="vo in item.child" :key="vo.id" class="item" @click="clickContent(vo)">
          {{ vo.title }}
        </div>
      </div>
      <div class="footer-wrap__sns">
        <edu-image :src="getSiteInfo.official_qr_url" class="wx" fit="cover"></edu-image>
        <div class="text">关注微信{{ getSiteInfo.title }}微信公众号</div>
      </div>
    </div>
    <div class="footer-line"></div>
    <div class="footer-info container">
      <div class="item" v-if="!$util.isEmpty(getSiteInfo.icp)">
        <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{
          getSiteInfo.icp
        }}</a>
      </div>
      <div class="item" v-if="!$util.isEmpty(getSiteInfo.copyright)">
        {{ getSiteInfo.copyright }}
      </div>
      <div class="item" v-if="!$util.isEmpty(getSiteInfo.portal_code)">
        <img class="gongan" src="@/assets/images/public/gongan.png" alt />
        <a href="https://www.beian.gov.cn/portal/registerSystemInfo" target="_blank">{{
          getSiteInfo.portal_code
        }}</a>
      </div>
    </div>
  </footer>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      navList: []
    }
  },
  computed: {
    ...mapGetters({
      getSiteInfo: 'projectSetting/getGlobSiteInfo'
    })
  },
  created() {
    this.handleNavList()
  },
  methods: {
    handleNavList() {
      this.$api.getNaviBottomList(res => {
        this.navList = res.data
      })
    },
    clickContent(item) {
      if (this.$util.inArray(item.data_type, [0, 1, 2])) {
        window.open(item.content, '_blank')
      } else {
        this.$router.push({
          path: `/agreement/${item.content}`
        })
      }
    },
    // 客服
    goConsult() {
      let consult = this.getSiteInfo.online_consult
      let url = consult
      if (this.$util.digits(consult)) {
        url = 'http://wpa.qq.com/msgrd?v=1&uin=' + consult + '&site=qq&menu=yes'
      }
      if (!this.$util.isEmpty(url)) {
        window.open(url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 0;
  background-color: rgba(255, 255, 255, 0.1);
}
.footer {
  margin-top: 60px;
  background-color: #211f1f;
  &-wrap {
    padding: 50px 0 40px;
    display: flex;
    &__scheme {
      flex: 0 0 312px;
      .logo {
        display: inline-block;
        margin-bottom: 15px;
        .router-link-active {
          text-decoration: none;
        }
        .el-image {
          max-width: 162px;
        }
      }
      .tel {
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
      }
      .el-button {
        margin-top: 30px;
      }
    }
    &__serial {
      flex: 1;
      .title {
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 15px;
      }
      .item {
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        line-height: 28px;
        cursor: pointer;
      }
    }
    &__sns {
      flex: 0 0 150px;
      text-align: center;
      .wx {
        width: 132px;
        height: 132px;
      }
      .text {
        margin-top: 14px;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
      }
    }
  }
  &-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
  }
  &-info {
    padding: 30px 0 40px;
    .item {
      font-size: 12px;
      font-weight: 400;
      color: rgba(205, 205, 205, 0.7);
      line-height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      a {
        color: rgba(205, 205, 205, 0.7);
        text-decoration: none;
      }
      .gongan {
        width: 18px;
        margin-right: 3px;
      }
    }
  }
}
</style>
